{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Highcharts Demos\n",
    "================\n",
    "Area range and line: http://www.highcharts.com/demo/arearange-line\n",
    "-------------------------------------------------------------------"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"&lt;!DOCTYPE html&gt;\n",
       "&lt;html lang=&quot;en&quot;&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;meta charset=&quot;utf-8&quot; /&gt;\n",
       "        &lt;link href=&quot;https://www.highcharts.com/highslide/highslide.css&quot; rel=&quot;stylesheet&quot; /&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts-more.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body style=&quot;margin:0;padding:0&quot;&gt;\n",
       "                &lt;div id=&quot;container&quot; style=&quot;width:750px;height:600px;&quot;&gt;Loading....&lt;/div&gt;\n",
       "\n",
       "\n",
       "    &lt;script&gt;\n",
       "        $(function(){\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "\n",
       "\n",
       "            Highcharts.setOptions({&quot;lang&quot;: {}, &quot;global&quot;: {}});\n",
       "            var option = {&quot;loading&quot;: {}, &quot;subtitle&quot;: {}, &quot;xAxis&quot;: {&quot;type&quot;: &quot;datetime&quot;}, &quot;title&quot;: {&quot;text&quot;: &quot;July temperatures&quot;}, &quot;series&quot;: {}, &quot;labels&quot;: {}, &quot;yAxis&quot;: {&quot;title&quot;: {&quot;text&quot;: null}}, &quot;chart&quot;: {&quot;width&quot;: 750, &quot;renderTo&quot;: &quot;container&quot;, &quot;height&quot;: 600}, &quot;tooltip&quot;: {&quot;shared&quot;: true, &quot;valueSuffix&quot;: &quot;\\u00b0C&quot;, &quot;crosshairs&quot;: true}, &quot;plotOptions&quot;: {}, &quot;credits&quot;: {&quot;enabled&quot;: false}, &quot;colors&quot;: {}, &quot;pane&quot;: {}, &quot;exporting&quot;: {}, &quot;drilldown&quot;: {}, &quot;navigation&quot;: {}, &quot;legend&quot;: {}};\n",
       "\n",
       "\n",
       "            var data = [{&quot;zIndex&quot;: 1, &quot;name&quot;: &quot;Temperature&quot;, &quot;marker&quot;: {&quot;lineWidth&quot;: 2, &quot;fillColor&quot;: &quot;white&quot;, &quot;lineColor&quot;: Highcharts.getOptions().colors[0]}, &quot;type&quot;: &quot;line&quot;, &quot;data&quot;: [[1246406400000, 21.5], [1246492800000, 22.1], [1246579200000, 23], [1246665600000, 23.8], [1246752000000, 21.4], [1246838400000, 21.3], [1246924800000, 18.3], [1247011200000, 15.4], [1247097600000, 16.4], [1247184000000, 17.7], [1247270400000, 17.5], [1247356800000, 17.6], [1247443200000, 17.7], [1247529600000, 16.8], [1247616000000, 17.7], [1247702400000, 16.3], [1247788800000, 17.8], [1247875200000, 18.1], [1247961600000, 17.2], [1248048000000, 14.4], [1248134400000, 13.7], [1248220800000, 15.7], [1248307200000, 14.6], [1248393600000, 15.3], [1248480000000, 15.3], [1248566400000, 15.8], [1248652800000, 15.2], [1248739200000, 14.8], [1248825600000, 14.4], [1248912000000, 15], [1248998400000, 13.6]]}, {&quot;name&quot;: &quot;Range&quot;, &quot;color&quot;: Highcharts.getOptions().colors[0], &quot;type&quot;: &quot;arearange&quot;, &quot;zIndex&quot;: 0, &quot;linkedTo&quot;: &quot;:previous&quot;, &quot;fillOpacity&quot;: 0.3, &quot;lineWidth&quot;: 0, &quot;data&quot;: [[1246406400000, 14.3, 27.7], [1246492800000, 14.5, 27.8], [1246579200000, 15.5, 29.6], [1246665600000, 16.7, 30.7], [1246752000000, 16.5, 25.0], [1246838400000, 17.8, 25.7], [1246924800000, 13.5, 24.8], [1247011200000, 10.5, 21.4], [1247097600000, 9.2, 23.8], [1247184000000, 11.6, 21.8], [1247270400000, 10.7, 23.7], [1247356800000, 11.0, 23.3], [1247443200000, 11.6, 23.7], [1247529600000, 11.8, 20.7], [1247616000000, 12.6, 22.4], [1247702400000, 13.6, 19.6], [1247788800000, 11.4, 22.6], [1247875200000, 13.2, 25.0], [1247961600000, 14.2, 21.6], [1248048000000, 13.1, 17.1], [1248134400000, 12.2, 15.5], [1248220800000, 12.0, 20.8], [1248307200000, 12.0, 17.1], [1248393600000, 12.7, 18.3], [1248480000000, 12.4, 19.4], [1248566400000, 12.6, 19.9], [1248652800000, 11.9, 20.2], [1248739200000, 11.0, 19.3], [1248825600000, 10.8, 17.8], [1248912000000, 11.8, 18.5], [1248998400000, 10.8, 16.1]]}]\n",
       "            option.series = data;\n",
       "\n",
       " \n",
       "\n",
       "            var chart = new Highcharts.Chart(option);\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "        \n",
       "    });\n",
       "        &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\" height=600 width=750></iframe>"
      ],
      "text/plain": [
       "<highcharts.highcharts.highcharts.Highchart at 0x7f5e2005f3d0>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from highcharts import Highchart\n",
    "H = Highchart(width=750, height=600)\n",
    "\n",
    "ranges = [\n",
    "    [1246406400000, 14.3, 27.7],\n",
    "    [1246492800000, 14.5, 27.8],\n",
    "    [1246579200000, 15.5, 29.6],\n",
    "    [1246665600000, 16.7, 30.7],\n",
    "    [1246752000000, 16.5, 25.0],\n",
    "    [1246838400000, 17.8, 25.7],\n",
    "    [1246924800000, 13.5, 24.8],\n",
    "    [1247011200000, 10.5, 21.4],\n",
    "    [1247097600000, 9.2, 23.8],\n",
    "    [1247184000000, 11.6, 21.8],\n",
    "    [1247270400000, 10.7, 23.7],\n",
    "    [1247356800000, 11.0, 23.3],\n",
    "    [1247443200000, 11.6, 23.7],\n",
    "    [1247529600000, 11.8, 20.7],\n",
    "    [1247616000000, 12.6, 22.4],\n",
    "    [1247702400000, 13.6, 19.6],\n",
    "    [1247788800000, 11.4, 22.6],\n",
    "    [1247875200000, 13.2, 25.0],\n",
    "    [1247961600000, 14.2, 21.6],\n",
    "    [1248048000000, 13.1, 17.1],\n",
    "    [1248134400000, 12.2, 15.5],\n",
    "    [1248220800000, 12.0, 20.8],\n",
    "    [1248307200000, 12.0, 17.1],\n",
    "    [1248393600000, 12.7, 18.3],\n",
    "    [1248480000000, 12.4, 19.4],\n",
    "    [1248566400000, 12.6, 19.9],\n",
    "    [1248652800000, 11.9, 20.2],\n",
    "    [1248739200000, 11.0, 19.3],\n",
    "    [1248825600000, 10.8, 17.8],\n",
    "    [1248912000000, 11.8, 18.5],\n",
    "    [1248998400000, 10.8, 16.1]\n",
    "]\n",
    "\n",
    "averages = [\n",
    "    [1246406400000, 21.5],\n",
    "    [1246492800000, 22.1],\n",
    "    [1246579200000, 23],\n",
    "    [1246665600000, 23.8],\n",
    "    [1246752000000, 21.4],\n",
    "    [1246838400000, 21.3],\n",
    "    [1246924800000, 18.3],\n",
    "    [1247011200000, 15.4],\n",
    "    [1247097600000, 16.4],\n",
    "    [1247184000000, 17.7],\n",
    "    [1247270400000, 17.5],\n",
    "    [1247356800000, 17.6],\n",
    "    [1247443200000, 17.7],\n",
    "    [1247529600000, 16.8],\n",
    "    [1247616000000, 17.7],\n",
    "    [1247702400000, 16.3],\n",
    "    [1247788800000, 17.8],\n",
    "    [1247875200000, 18.1],\n",
    "    [1247961600000, 17.2],\n",
    "    [1248048000000, 14.4],\n",
    "    [1248134400000, 13.7],\n",
    "    [1248220800000, 15.7],\n",
    "    [1248307200000, 14.6],\n",
    "    [1248393600000, 15.3],\n",
    "    [1248480000000, 15.3],\n",
    "    [1248566400000, 15.8],\n",
    "    [1248652800000, 15.2],\n",
    "    [1248739200000, 14.8],\n",
    "    [1248825600000, 14.4],\n",
    "    [1248912000000, 15],\n",
    "    [1248998400000, 13.6]\n",
    "        ]\n",
    "\n",
    "options = {\n",
    "    'title': {\n",
    "        'text': 'July temperatures'\n",
    "    },\n",
    "    'xAxis': {\n",
    "        'type': 'datetime'\n",
    "    },\n",
    "    'yAxis': {\n",
    "        'title': {\n",
    "            'text': None\n",
    "        }\n",
    "    },\n",
    "    'tooltip': {\n",
    "        'crosshairs': True,\n",
    "        'shared': True,\n",
    "        'valueSuffix': '°C'\n",
    "    },\n",
    "    'legend': {\n",
    "    }\n",
    "}\n",
    "\n",
    "H.set_dict_options(options)\n",
    "\n",
    "H.add_data_set(averages, 'line', 'Temperature', zIndex=1, marker={\n",
    "                'fillColor': 'white',\n",
    "                'lineWidth': 2,\n",
    "                'lineColor': 'Highcharts.getOptions().colors[0]'\n",
    "            })\n",
    "\n",
    "H.add_data_set(ranges, 'arearange', 'Range', lineWidth=0,\n",
    "            linkedTo=':previous',\n",
    "            color='Highcharts.getOptions().colors[0]',\n",
    "            fillOpacity=0.3,\n",
    "            zIndex=0 )\n",
    "\n",
    "H"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
